<!DOCTYPE html>
<!--TODO: License and copyright-->
<html>

<script src="../../third-party/closure/closure/goog/base.js"></script>
<script src="../deps.js"></script>
<script src="json_templates.js"></script>
<script>
    goog.require('goog.dom');
    goog.require('goog.graphics')
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('specview.io.json');  
    goog.require('specview.controller.Controller');
    goog.require('specview.controller.plugins.Highlight');
</script>
<script>
function showJSON(mol) {
    document.write(specview.io.json.writeMolecule(mol));
}
function showMol(i) {
    var mol = specview.io.json.readMolecule(templates[i]);
    var editor = new specview.controller.Controller(goog.dom.getElement('moleculeKontainer'),{background : {color : 'white'}});
    editor.registerPlugin(new specview.controller.plugins.Highlight());
    editor.setModels([mol]);
}
</script>

<head>
<title>Render templates</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>

<body>
    <div id="moleculeKontainer" style="width: 400px; height: 200px"></div>
    <p>Simply move your mouse on atoms and bonds</p>
    <p>Select template below</p>
	<script>
	
	showMol(0);
	for (i in templates) {
		document.write('<a href="javascript:showMol(' +i+ ')">[' +templates[i].name+ ']</a>&nbsp;&nbsp;');
	}
	</script>
</body>
</html>
